<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
    <title>Student Website</title>
</head>

<body>
<div class="navbar">
    <span class="title"><a href="/" style="text-decoration: none;  color: black">Back To Main Page</a></span>
</div>
<a onclick="window.history.go(-1)">Back</a>
<div class="card">
    <h2>Course Forum</h2>

    <div class="card1">
        <!-- 发帖表单 -->
        <h3>New Post</h3>
        <form id="new-post-form">
            <input class="input" type="text" id="post-title" name="post-title" placeholder="Title"><br><br>
            <textarea class="input" type="text" id="post-content" name="post-content"
                      placeholder="Content"></textarea><br>
            <button type="submit" class="button">Post</button>
        </form>
    </div>
</div>
<div class="card">
    <!-- 帖子列表 -->
    <h2>Posts</h2>
    <ul id="post-list"></ul>
</div>

<script>
    const courseId = new URLSearchParams(window.location.search).get("courseId");
    {#console.log(courseId)#}
    function getPosts(courseId) {
        fetch(`/api/posts/${courseId}`)
            .then(response => response.json())
            .then(data => {
                const postList = document.getElementById("post-list");
                postList.innerHTML = "";
                data.data.forEach(post => {
                    console.log(post);
                    const listItem = document.createElement("li");
                    listItem.innerHTML = `
                           <div class="card1">
                                <strong style="font-size: 25px">${post.title}</strong> <span style="color: #3d3d3d">#${post.username}</span>
                                <br>
                                <p>${post.content}</p>
                                <form class="reply-form" id="reply-form-${post.post_id}">
                                    <input type="hidden" name="post-id" value="${post.post_id}">
                                    <textarea class="input" id="reply-content-${post.post_id}" name="reply-content" placeholder="Reply"></textarea><br>
                                    <button type="submit" class = "button" class="buttonShort" onclick="replyToPost(${post.post_id}); return false;">Reply</button>
                                </form>
                                <br>
                                <div class="card">
                                     <ul>
                                        ${post.comments.map(comment => `<li><em style="font-size: 20px; color: #3d3d3d">${comment.username}</em> Reply: ${comment.content}</li>`).join("")}
                                     </ul>
                                </div>
                           </div>
                        `;
                    postList.appendChild(listItem);
                });
            })
            .catch(error => console.error('Error:', error));
    }

    document.getElementById("new-post-form").addEventListener("submit", function (event) {
        event.preventDefault();
        const formData = new FormData(this);
        const courseId = new URLSearchParams(window.location.search).get("courseId");

        fetch("/api/posts", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                course_id: courseId,
                title: formData.get("post-title"),
                content: formData.get("post-content")
            })
        })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                getPosts(courseId);
            })
            .catch(error => console.error('Error:', error));
    });

    function replyToPost(postId) {
        const formData = new FormData(document.getElementById(`reply-form-${postId}`));
        fetch(`/api/posts/${postId}/comments`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                content: formData.get("reply-content"),
                course_id: courseId
            })
        })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                window.location.reload();
            })
            .catch(error => console.error('Error:', error));
    }

    getPosts(courseId);
</script>
</body>
<style>
    /* 卡片基础样式 */
    .card1 {
        background-color: #F9F2E0;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 90%; /* 根据需要调整宽度 */
        margin: 20px auto; /* 居中显示 */
    }

    /* 卡片标题 */
    .card h2 {
        color: #333;
        margin-top: 0;
        margin-bottom: 16px;
        font-size: 24px;
    }

    /* 输入框和文本区域的基础样式 */
    .card .input {
        width: 80%;
        padding: 12px 16px;
        margin-bottom: 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }


    /* 自定义文本区域的高度 */
    .card textarea.input {
        min-height: 100px; /* 可根据需要调整高度 */
    }

    .buttonShort {
        width: 80px; /* 或者任意你希望的宽度 */
    }

</style>
</html>